<template>
	<view class="detailBox" v-if="good">
		<image class="goodImg" :src="good.goods_icon" />
		<view class="goodInfoBox">
			<view class="goodInfo">{{good.goods_desc}}</view>
			<view class="price">价格：￥{{good.goods_price}}</view>
			<view class="stock">库存：{{good.goods_stock_count}}件</view>
		</view>
		<button class="addToCartBtn" @click="addToCart">加入购物车</button>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import { detail, addCart } from '../../api/api'
import { onLoad } from '@dcloudio/uni-app'

const id = ref(uni.getStorageSync('goods_id'));
const good = ref()
onLoad(() => {
  detail({ goods_id: uni.getStorageSync('goods_id') })
    .then(res => good.value = res.data)
    .catch(err => uni.showToast({ title: err.message, icon: 'none' }))
})

function addToCart() {
		addCart({
			username: uni.getStorageSync('loginUserName'),
			goods_id: id.value,
			quantity: 1
		}).then(res => {
			uni.showToast({
				title: res.message,
				icon: 'none'
			});
		}).catch(err => {
			uni.showToast({
				title: err.message,
				icon: 'none'
			});
		});
	}
</script>

<style lang="scss" scoped>
	.detailBox {
		position: absolute;
		padding: 20rpx 40rpx;
		.goodImg {
			width: 80%;
			height: 450rpx;
			position: relative;
			left: 50%;
			transform: translateX(-50%);
		}
		.goodInfoBox {
			margin-top: 30rpx;
			view {
				margin-bottom: 10rpx;
			}
			.goodInfo {
				font-size: 32rpx;
				font-weight: 600;
				color: #333;
			}
			.price {
				font-size: 32rpx;
				font-weight: 500;
				color: #ff6a6a;
			}
			.stock {
				font-size: 28rpx;
				font-weight: 500;
				color: #999;
			}
		}
		.addToCartBtn {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			height: 96rpx;
			line-height: 96rpx;
			text-align: center;
			font-size: 32rpx;
			font-weight: 600;
			color: #fff;
			background: linear-gradient(90deg, #ff6a6a, #ff2d46);
			border-radius: 0;
		}
	}
</style>